<template>
	<view style="height: 100%;">
		<view class="order-list">
			<view class="item2">
				<image class="sp-image" :src="shopInfo.logo"></image>
				<view class="good-Info" style="display: flex;">
					<view style="flex: 1;">
						<view class="good-name">{{shopInfo.shop_name}}</view>
						<view class="good-yh">
							{{shopInfo.label}}
						</view>
					</view>

					<view style="display: flex;align-items: center;justify-content: center;">
						<view class="writeBtn" @click="toScanCode()">
							<u-icon name="scan" color="#FFFFFF" size="28" ></u-icon>扫码核单
						</view>
					</view>
				</view>
			</view>
			<view class="hx-header">
				<view class="hx-title">
					<view class="title">核销统计</view>
					<view class="total">总核销:{{shopInfo.writeoff_num}}张</view>
				</view>
			</view>	
			<!-- <view class="hx-list noGood">
				<image src="../../static/images/noGoods.png" class="noGoods"></image> -->
			<view class="hx-list">
				<view class="hx-item" v-for="item in shopInfo.writeoff_list">
					<view class="item-1">
						<view class="shop-name">{{item.shop_name}}</view>
						<view class="pay-price">实付: ￥{{item.price}}</view>
					</view>
					<view class="good-info">
						<view class="good-img">
							<image :src="item.goods_image" mode=""></image>
						</view>
						<view class="info-right">
							<view class="good-name-price">
								<view class="name">{{item.goods_name}}</view>
								<view class="price">{{item.market_price}}</view>
							</view>
							<view class="num">x1</view>
						</view>
					</view>
				</view>
		
				</view>
			</view>
			<view class="tabbar-bottom">
				<view style="flex: 1;display: flex;align-items: center;justify-content: center;" @click="callPhone">
					<u-icon name="kefu-ermai" color="#000000" size="28"></u-icon>
					联系客服</view>
				<view style="flex: 1;" >
					<view class="editShop" @click="editShop">编辑门店信息</view>
				</view>
			</view>
		</view>
	
</template>

<script>
	import {
		postNewsDetail,
		shopcategory,
		shoplist,
		merchanthomepage,
		scancode
	} from "../../api/home.js";
	import {
		url,upFile
	} from "../../utils/url.js";
		
	import {
		getUserInfo,
		getServicePhone
	} from '@/api/user.js'
	import {
		wechatConfig
	} from '../../api/public.js';
	export default {
		data() {
			return {
				userInfo: '',
				payType: null,
				message: "",
				show: true,
				text: 20,
				current: 0,
				activeStyle: {
					color: '#000000',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#808080',
					transform: 'scale(1)'
				},
				q: "",
				cate_id: "",
				lng: "",
				lat: "",
				newDetail: {}, // 咨询详情
				shopInfo: null,
				shoplist: []
			}
		},
		onLoad(e) {
			console.log('条码内容：' ,);
			this.userInfo=uni.getStorageSync('userInfo')
			this.init()
			// this.getConfig();
		},
		onShow() {
			if (uni.getStorageSync('uid')) {
				this.getInfo();
			}
			this.init()
		},
		methods: {
			callPhone(){
				if(this.shopInfo.phone!=null){
					uni.makePhoneCall({
						phoneNumber: this.shopInfo.phone //仅为示例
					});
				}else{
					uni.$u.toast("暂无联系号码")
				}
				
			},
			 getConfig() {
			 	var data = {
			 		url: encodeURIComponent(location.href.split('#')[0])
			 	}
			 	wechatConfig(data).then(res => {
			 		this.initJsdk(res.data.data)
			 	})
			 },
			 initJsdk(config) {
			 
			 	this.$wx.config({
			 		debug: false, // 开启调试模式
			 		appId: config.appId, // 必填，公众号的唯一标识
			 		timestamp: config.timestamp, // 必填，生成签名的时间戳
			 		nonceStr: config.nonceStr, // 必填，生成签名的随机串
			 		signature: config.signature, // 必填，签名，见附录1
			 		jsApiList: config.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			 	})
			 	this.$wx.ready(function() {
					
			 		this.$wx.checkJsApi({
						jsApiList: ['openLocation','scanQRCode', 'checkJsApi'],
			 		})
			 	})
			 	this.$wx.error(function(res) {
			 	});
			 
			 }, 
			toScanCode(){
				const that = this;
				uni.scanCode({
					success: function (res) { 
				     var result = res.result; // 当 needResult 为 1 时，扫码返回的结果
					     
						 var data={
							order_sn:result
						 }
						 uni.navigateTo({
							url: '/pages/home/subOrder?order_sn='+result
						 })
				  },
				  fail: function (response) {
				    console.log("调用扫码失败",response)
				    uni.$u.toast("调用扫码失败")
				  },
				});
						
			},
			editShop() {
				uni.navigateTo({
					url: '/pages/home/editShop?shopId='+this.userInfo.shop_id
				})
			},
			open() {
				this.show = true
			},
			close() {
				this.show = false
				// console.log('close');
			},
			async init() {
				this.getInfo();
				
				uni.showLoading({
					title: ""
				})
				var data={
					shop_id:this.userInfo.shop_id,
					token:uni.getStorageSync('token')
				}
				merchanthomepage(data).then(res=>{
					uni.hideLoading()
					console.log("merchanthomepage",res);
					if(res.data.code==1){
						this.shopInfo=res.data.data
					}else{
						uni.$u.toast(res.data.msg)
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
						
					}
				})
			},
			getInfo() {
				var data = {
					uid: uni.getStorageSync('uid')
				}
				getUserInfo(data).then(res => {
					if (res.data.code == 1) {
						this.userInfo = res.data.data;
						uni.setStorageSync('userInfo', res.data.data);
						uni.setStorageSync('token', res.data.data.token);
					} else {
						wx.clearStorage()
					}
				})
			},
		}
	}
</script>

<style>
	.noGood{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.noGoods{
		width: 292rpx;
		height: 254rpx;
	}
	.tabbar-bottom{
		width: 750rpx;
		position: fixed;
		bottom: 0px;
		height: 120rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
	}
	.wxpay-image {
		width: 42rpx;
		height: 43rpx;
		margin-right: 10rpx;
	}

	.closeIcon {
		width: 38rpx;
		height: 38rpx;
		background-image: url('@/static/images/close.png');
		background-repeat: round;
		content: "";
		z-index: 10;
		position: absolute;
		bottom: -60rpx;
	}

	.writeBtn {
		flex: 1;
		width: 240rpx;
		height: 72rpx;
		background: linear-gradient(90deg, #98E05F, #0DE3AC);
		border-radius: 35rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.editShop{
		width: 294rpx;
		height: 84rpx;
		background: linear-gradient(90deg, #98E05F, #0DE3AC);
		border-radius: 42rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.useBtn2 {
		margin: 0 91rpx;
		position: absolute;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		/* 		background: linear-gradient(to right, #98E05F, #0DE3AC);
 */
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 72rpx;
		bottom: 170rpx;
		width: 568rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DE3AC, #98E05F);
		border-radius: 44rpx;
	}

	.show-qrcode {
		width: 560rpx;
		height: 570rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tips {
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 69rpx;
	}

	.qr-codeBg {
		width: 416rpx;
		height: 405rpx;
		background-image: url('@/static/images/codeBg.png');
		background-repeat: round;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.qrCode {
		width: 278rpx;
		height: 278rpx;
	}

	.yh-icon {
		width: 26rpx;
		height: 26rpx;
		background: #F5750A;
		font-size: 10rpx !important;
		border-radius: 4rpx;
		content: "惠";
		color: white;
		margin-right: 4rpx;
		text-align: center;
	}

	.order-list {
		margin-bottom: 40rpx;
	}

	.item1 {
		display: flex;
		border-bottom: 1px solid #DCDCDC;
		background-color: white;
	}

	.shop-name {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 86rpx;
		flex: 1;
	}

	.status {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FF3434;
		line-height: 86rpx;
	}

	.item2 {
		display: flex;
		padding: 30rpx 40rpx;
		background-color: white;
	}

	.sp-image {
		width: 164rpx;
		height: 164rpx;
		flex: 1;
	}

	.good-Info {
		margin-left: 20rpx;
		flex: 3;
	}

	.good-name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 69rpx;
	}

	.good-yh {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		display: flex;
		/* 		line-height: 69rpx; */
	}

	.good-price {
		flex: 3;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF3434;
		line-height: 69rpx;
	}

	.good-num {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 69rpx;
	}

	.item3 {
		width: 750rpx;
		height: 86rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		padding: 0 40rpx;
	}

	.item4 {
		width: 750rpx;
		height: 86rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
	}

	.order-num {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 69rpx;




		flex: 1;
	}

	.cancelBtn {
		background-color: rgba(238, 238, 238, 1);
		color: white;
		width: 170rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 35px;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #4D4D4D;
		line-height: 72rpx;
		margin-right: 30rpx;
	}

	.useBtn {

		width: 170rpx;
		height: 72rpx;
		color: white;
		border-radius: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to right, #98E05F, #0DE3AC);
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 72rpx;
	}
	
	.hx-header{
		background: #FFFFFF;
		margin-top: 20rpx;
		border-bottom: 1px solid #DCDCDC;
	}
	
	.hx-header .hx-title{
		height: 86rpx;
		display: flex;
		align-items: center;
		margin: 0 40rpx;
	}
	.hx-header .title{
		flex: 1;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 86rpx;
	}
	.hx-header .total{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FF3434;
	}
	
	.hx-list{
		background: #FFFFFF;
		padding: 0 40rpx;
		overflow: hidden;
		overflow-y: scroll;
		height: 60vh;
	}
	.hx-item{
		
	}
	.hx-item .item-1{
		display: flex;
		align-items: center;
	}
	.hx-item .item-1 .shop-name{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 69rpx;
	}
	.hx-item .item-1 .pay-price{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #4D4D4D;
		line-height: 69rpx;
	}
	.hx-item .good-info{
		display: flex;
		flex-direction: row;
		border-bottom: 1px solid  #DCDCDC;;
	}
	.good-img {
		width: 100rpx;
	}
	.good-img image{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.hx-item .good-info .info-right{
		flex: 1;
		margin-left: 10rpx;
	}
	.hx-item .good-info .info-right .good-name-price{
		display: flex;
		
	}
	.hx-item .good-info .info-right .good-name-price .name{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #808080;
		line-height: 69rpx;
		flex: 1;
	}
	.hx-item .good-info .info-right .good-name-price .price{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FF3434;
		line-height: 69rpx;
	}
	.hx-item .good-info .info-right .num{
		text-align: right;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FF3434;
		line-height: 50rpx;
	}
</style>
